import type { CommonComponentProps } from '../../interface'
import { useMaterialDrop } from '../../hooks/useMaterialDrop'
export default function Pagedev({id, name, children, styles}: CommonComponentProps) {

  const { canDrop, dropRef, contextHolder } = useMaterialDrop(['Button', 'Container'], id)

  return (
    <>
      {contextHolder}
      <div 
        data-component-id={id}
        ref={dropRef as any} 
        className='p-[20px] h-[100%] box-border'
        style={{...styles, border: canDrop ? '2px solid blue' : 'none'}}
      >
        {children}
      </div>
    </>
  )
}
